<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0">
    <title th:text="${title}"></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
    <link rel="stylesheet" th:href="@{/editormd/css/editormd.min.css}">
</head>
<body>



<!--导航-->
<nav class="ui inverted attached segment" th:fragment="nav(n)">
    <div class="ui container">
        <div class="ui inverted menu secondary">
            <!--            item表示是menu中的单位之一-->
            <h2 class="ui teal header item">
                WANT
            </h2>
            <a href="#" class="ui item" th:classappend="${n==1} ? 'active'" th:href="@{/admin/blogList}"><i class="info icon"></i>博客列表</a>
            <a href="#" class="ui item" th:classappend="${n==2} ? 'active'" th:href="@{/admin/blogInput}" ><i class="home icon"></i>博客</a>
            <a href="#" class="ui item" th:classappend="${n==3} ? 'active'" th:href="@{/admin/type}"><i class="idea icon" ></i>分类</a>
            <a href="#" class="ui item" th:classappend="${n==4} ? 'active'" th:href="@{/admin/tag}"><i class="tags icon" ></i>标签</a>
            <div class="item right">
                <div class="ui inline dropdown">
                    <div class="text">
                        <img class="ui avatar image" src="../static/images/头像.png" th:src="@{/images/头像.png}">
                        want
                    </div>
                    <i class="dropdown icon"></i>

                    <div class="ui menu">
                        <button class="ui item button">注销</button>
                        <button class="ui item button">注销</button>
                        <button class="ui item button">注销</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</nav>


<!--底部的内容-->

<footer class="ui inverted vertical segment" th:fragment="footer">
    <div class="ui center aligned container m-padded-tb-massive">
        <!--        grid将footer分为16-->
        <div class="ui grid divided inverted">
            <!--            wide填满-->
            <div class="three wide column">
                <img src="../static/images/weichat.png" th:src="@{/images/weichat.png}" alt="_blank" class="image ui rounded" style="width:110px;height:110px">
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">最新博客</h4>
                <div class="ui inverted link list " >
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">最新博客</h4>
                <p>这里是一些其他信息</p>
            </div>


        </div>

        <div class="ui inverted section divider"></div>
        <p>关于法律信息</p>
    </div>
</footer>


<th:block th:fragment="script">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
    <script src="../static/js/action.js" th:src="@{/js/action.js}"></script>
    <script th:src="@{/editormd/editormd.min.js}"></script>
    <script>
        $('.ui.dropdown').dropdown()
        ;
    </script>
</th:block>

</body>
</html>